<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- react 核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- dom相关库 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Es6->Es5 jsx->js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="app"></div>
<!-- 使用JSX，属性使用text/babel -->
<script type="text/babel">

    //1.创建组件
    class Weather extends React.Component{


        //构造器调用一次
        constructor(props){
            super(props)
            //状态，只能是state，因为有setState()方法
            this.state = {
                isHot: false,
                wind: "微风"
            }

            //这里借助bind，让changeWeather里面的this指向实例对象
            this.changeWeather = this.changeWeather.bind(this)

        }


        //render()函数调用1+n次，1是页面初始化那次，n是状态更新的次数
        render(){
            console.log('render')
            return(
                //react怎么绑定点击事件，onClick指定函数，注意C式大写，后面是函数，而不是函数的调用
                //直接onClick拿到函数，属于直接调用，所以函数里面的this指向window，类中局部自动开启了严格模式，所以是undefined
                <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? "炎热" : "凉爽"}，{this.state.wind}</h1>
            )
        }


        changeWeather(){
            console.log(this)
            const isHot = this.state.isHot
            // 状态(state)不可直接更改，要借助一个内置的API去更改
            // this.state.isHot = !isHot
            // 要使用setState()进行更新，更新是一种合并，不是替换
            this.setState({isHot: !isHot})
            console.log(this.state.isHot)
        }

    }

    

    //渲染组件
    ReactDOM.render(<Weather/>, document.getElementById("app"))
</script>
 
</body>
</html>